

<div class="kpr-boxlet-grp">
  <a href="#" class="k9wr13zv btn btn-default">Back</a>
</div>

<div class="kpr-boxlet">

    <div class="kb-title kb-underline">{{.panel_title}}</div>

    <div id="q6p2le" class="alert hide"></div>
    
    <form id="vukihr" class="form-horizontal" action="#">
    
    <label class="keeper-form-group-title">Information (Required)</label>

    <div class="form-group">
      <label class="col-sm-3 control-label">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="name" value="{{.name}}" readonly>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label">Description</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="desc" value="{{.desc}}">
      </div>
    </div>

    <label class="keeper-form-group-title">Specs  (Optional)</label>

    <div class="form-group">
      <label class="col-sm-3 control-label">Max storage Size (MB)</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="datasize" value="{{.datasize}}">
      </div>
    </div>
    {{if .action_new}}
    <div class="form-group">
      <label class="col-sm-3 control-label">Access Key</label>
      <div class="col-sm-9">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="auto_access_key" value="1" checked> Auto create a Access Key for this bucket
          </label>
        </div>
      </div>
    </div>
    {{end}}

    <label class="keeper-form-group-title">Owner Information (Optional)</label>

    <div class="form-group">
      <label class="col-sm-3 control-label">Owner Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="ownerName" value="{{.ownerName}}">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label">Owner Email</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="ownerEmail" value="{{.ownerEmail}}">
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3"></label>
      <div class="col-sm-9">
        <button id="rrl00car" type="submit" class="btn btn-primary">{{T . "Save"}}</button>
      </div>
    </div>

    </form>
</div>

<script>

$(".k9wr13zv").click(function() {
    _kpr_nav_go("bucket/list", "");
});


//
$("#vukihr").submit(function(event) {

    event.preventDefault();
    
    $("#rrl00car").attr('disabled', 'disabled');

    var req = {
        access_token: lessCookie.Get("access_token_keeper"),
        data: {
            name: $(this).find("input[name='name']").val(),
            desc: $(this).find("input[name='desc']").val(),
            ownerName: $(this).find("input[name='ownerName']").val(),
            ownerEmail: $(this).find("input[name='ownerEmail']").val(),
            dataSize: parseInt($(this).find("input[name='datasize']").val(), 10),
            auto_access_key: $(this).find("input[name='auto_access_key']").val()
        }
    };

    //console.log(req);

    $.ajax({
        type    : "POST",
        url     : "/keeper/v1/bucket/setup",
        data    : JSON.stringify(req),
        timeout : 3000,
        contentType: "application/json; charset=utf-8",
        success : function(rsp) {

            var rsj = JSON.parse(rsp);

            if (rsj.status == 200) {
                
                lessAlert("#q6p2le", 'alert-success', "Successfully saved");
                
                window.setTimeout(function(){
                    keeperComLoader("bucket/list");
                }, 1500);

            } else {
                lessAlert("#q6p2le", 'alert-danger', rsj.message);
                $("#rrl00car").removeAttr('disabled');
            }
        },
        error: function(xhr, textStatus, error) {
            lessAlert("#q6p2le", 'alert-danger', '{{T . "Internal Server Error"}}');
            $("#rrl00car").removeAttr('disabled');
        }
    });
});

</script>
